// H5端首页 - 参考原型图设计（红色主题）
import React from 'react'
import { Card } from 'konsta/react'
import { Home, Car, ShoppingBag, GraduationCap, Dumbbell, UtensilsCrossed, TrendingUp, TrendingDown, CreditCard } from 'lucide-react'

const HomePage = () => {
  // 模拟数据
  const balance = 10250
  const income = 5600
  const spent = 2820

  const categories = [
    { icon: Home, label: '房租', amount: '¥1000', color: 'from-red-500 to-red-600' },
    { icon: Car, label: '汽车', amount: '¥80', color: 'from-orange-500 to-orange-600' },
    { icon: ShoppingBag, label: '购物', amount: '¥160', color: 'from-amber-500 to-amber-600' },
    { icon: GraduationCap, label: '教育', amount: '¥200', color: 'from-red-400 to-red-500' },
    { icon: Dumbbell, label: '健身', amount: '¥60', color: 'from-orange-400 to-orange-500' },
    { icon: UtensilsCrossed, label: '餐饮', amount: '¥180', color: 'from-amber-400 to-amber-500' },
  ]

  const transactions = [
    { id: 1, title: '房屋租金', type: '储蓄卡', amount: '¥2,500', date: '2024-01-20', icon: Home },
    { id: 2, title: '超市购物', type: '储蓄卡', amount: '¥320', date: '2024-01-19', icon: ShoppingBag },
  ]

  return (
    <div className="min-h-screen bg-gray-50 pb-20">
      <div className="p-4 space-y-4">
        {/* 余额卡片 */}
        <Card className="!bg-gradient-to-br from-red-500 via-red-600 to-orange-600 !border-0 shadow-xl overflow-hidden">
          <div className="p-6 text-white">
            {/* 顶部设置图标 */}
            <div className="flex justify-between items-center mb-6">
              <div className="flex space-x-1">
                <div className="w-1 h-4 bg-white/30 rounded-full"></div>
                <div className="w-1 h-4 bg-white/30 rounded-full"></div>
                <div className="w-1 h-4 bg-white/30 rounded-full"></div>
              </div>
              <div className="w-10 h-10 bg-white/20 backdrop-blur rounded-full flex items-center justify-center">
                <span className="text-sm font-bold" role="img" aria-label="user">👤</span>
              </div>
            </div>

            {/* 余额 */}
            <div className="mb-6">
              <div className="text-sm opacity-90 mb-1">当前余额</div>
              <div className="text-4xl font-bold">¥{balance.toLocaleString()}</div>
            </div>

            {/* Income & Spent */}
            <div className="grid grid-cols-2 gap-4">
              <div className="bg-white/15 backdrop-blur rounded-2xl p-3">
                <div className="text-xs opacity-80 mb-1">收入</div>
                <div className="flex items-center justify-between">
                  <span className="text-xl font-bold">¥{income.toLocaleString()}</span>
                  <TrendingUp size={20} className="opacity-80" />
                </div>
              </div>
              <div className="bg-white/15 backdrop-blur rounded-2xl p-3">
                <div className="text-xs opacity-80 mb-1">支出</div>
                <div className="flex items-center justify-between">
                  <span className="text-xl font-bold">¥{spent.toLocaleString()}</span>
                  <TrendingDown size={20} className="opacity-80" />
                </div>
              </div>
            </div>
          </div>
        </Card>

        {/* 分类快捷功能 */}
        <div className="grid grid-cols-3 gap-3">
          {categories.map((category, index) => {
            const Icon = category.icon
            return (
              <Card 
                key={index}
                className="!bg-white !border-0 shadow-md hover:shadow-lg transition-all cursor-pointer"
              >
                <div className="p-4 flex flex-col items-center space-y-2">
                  <div className={`w-14 h-14 bg-gradient-to-br ${category.color} rounded-2xl flex items-center justify-center shadow-md`}>
                    <Icon className="text-white" size={24} />
                  </div>
                  <div className="text-center">
                    <div className="text-sm font-semibold text-gray-800">{category.label}</div>
                    <div className="text-xs text-gray-500">{category.amount}</div>
                  </div>
                </div>
              </Card>
            )
          })}
        </div>

        {/* Transactions 列表 */}
        <div>
          <div className="flex justify-between items-center mb-3">
            <h3 className="text-lg font-bold text-gray-800">交易记录</h3>
            <button className="text-sm text-red-600 font-medium">全部 ›</button>
          </div>

          <div className="space-y-3">
            {transactions.map((transaction) => {
              const Icon = transaction.icon
              return (
                <Card 
                  key={transaction.id}
                  className="!bg-gradient-to-r from-red-500 to-orange-500 !border-0 shadow-lg"
                >
                  <div className="p-4">
                    <div className="flex items-center space-x-4">
                      {/* 图标 */}
                      <div className="w-14 h-14 bg-white/20 backdrop-blur rounded-full flex items-center justify-center flex-shrink-0">
                        <Icon className="text-white" size={24} />
                      </div>
                      
                      {/* 信息 */}
                      <div className="flex-1 min-w-0">
                        <div className="font-semibold text-white mb-0.5">{transaction.title}</div>
                        <div className="text-sm text-white/70">{transaction.type}</div>
                        <div className="text-xs text-white/60 mt-1">{transaction.date}</div>
                      </div>

                      {/* 金额 */}
                      <div className="flex items-center space-x-2 flex-shrink-0">
                        <div className="text-xl font-bold text-white">{transaction.amount}</div>
                        <CreditCard className="text-white/60" size={20} />
                      </div>
                    </div>
                  </div>
                </Card>
              )
            })}
          </div>
        </div>

        {/* 占位区域 - 供组员扩展 */}
        <Card className="!bg-gradient-to-br from-red-50 to-orange-50 !border-2 !border-dashed !border-red-200">
          <div className="p-8 text-center text-gray-400">
            <div className="text-sm">扩展功能区域</div>
            <div className="text-xs mt-1 opacity-70">待组员实现</div>
          </div>
        </Card>
      </div>
    </div>
  )
}

export default HomePage
